<template>
    <div class="dataAdd">
        <!-- 级联选择器 -->
        <el-cascader-panel v-model="form.pca" :options="pca" :props='{value:"name",label:"name" }' @change='choice'></el-cascader-panel>
        
        <div style='position:relative'>
            <!-- 表单 -->
            <div style="width:50%;margin-top:10px; dispaly:inline-block;">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="确诊">
                        <el-input v-model="form.confirmed"></el-input>
                    </el-form-item>
                    <el-form-item label="疑似">
                        <el-input v-model="form.suspected"></el-input>
                    </el-form-item>
                    <el-form-item label="死亡">
                        <el-input v-model="form.dead"></el-input>
                    </el-form-item>
                    <el-form-item label="治愈">
                        <el-input v-model="form.cure"></el-input>
                    </el-form-item>
                    <el-form-item label="重症">
                        <el-input v-model="form.severe"></el-input>
                    </el-form-item>
                    <el-form-item label="境外输入">
                        <el-input v-model="form.outside"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="toAdd">提交</el-button>
                    </el-form-item>
                </el-form>

            </div>
            <!-- 提示框 -->
            <div style="display:inline-block;position:absolute; top:3%; margin-left:700px;
            color:red;">
                <div>温馨提示:</div>
                <div>1.先录入城市</div>
                <div>1.再填写数据</div>
            </div>
        </div>
    </div>
</template>
<script>
// 引入省市区的文件
import pca from '@/assets/pca.json'
// 引入qs
import qs from 'qs'
import axios from '@/http/axios'
import moment from 'moment'
export default {
    data(){
        return {
            pca,
            form:{
                country:'中国'
            }
        }
    },
    methods:{

        // 数据录如：每一个城市每一天只允许修改一次数据，当天之后所有提交都是修改
        // 级联选择器选中后触发的事件
        choice(val){
            // 获取当天时间
             var data = moment( new Date()).format('YYY-MM-DD')

            var obj = {
                page:1,
                pageSize:10,
                province:val[0],
                city:val[1],
                area:val[2],
                inputTime: data

            }

            
            axios({
                url:'http://121.199.29.84:8001/epidemic/pageQuery',
                method:'get',
                params:obj,
                
            }).then((res)=>{
                 
                // 将分页查询的结果赋值给保存接口的数据，也就是吧id复制过去
                if(res.data.data.total != 0){
                    this.form = res.data.data.list[0] 
                }
                
            })

        },
        toAdd(){
            //克隆数据
            var data = Object.assign({},this.form)
            if(!this.form.id){
                data.province = data.pca[0]
                data.city = data.pca[1]
                data.area = data.pca[2]
            }
            
            // 删除数据
            delete data.pca
            
            axios({
                url:'http://121.199.29.84:8001/epidemic/saveOrUpdate',
                method:'post',
                data:qs.stringify(data),
                headers:{
                    'content-type':'application/x-www-form-urlencoded'
                }
            }).then((res=>{
                // 2提示用户更新成功
               this.$notify({
                   title:'成功',
                   message:res.data.message,
                   type:'success'
                   
               });
                // 1 跳转到数据列表页面
                this.$router.push({
                    path:'/data/dataList'
                })
            }))

        }
    }
}
</script>